<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrap {
            width: 1200px;
            margin: 50px auto;
        }

        .wrap ul {
            /* display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly; */
            overflow: hidden;
        }

        .wrap ul>li {
            width: 300px;
            float: left;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 0 10px;
            padding: 5px;
        }

        .wrap ul>li>img {
            width: 100%;
        }

        .header {
            height: 100px;
            background-color: #6ff;
        }

        .footer {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="wrap">
        <ul class="box">
            <!-- <li>
                <img src="http://gw.alicdn.com/bao/uploaded/i2/72458074/TB2oYdsedXnpuFjSZFoXXXLcpXa_!!72458074.jpg"
                    alt="">
                <div>
                    <p>【移不动】Capcom CFB 怪物猎人 泡狐龙 手办 散货</p>
                    <p><span>600.00</span> <i>100</i></p>
                </div>

            </li> -->
        </ul>
    </div>
    <div class="footer"></div>
</body>
<script>
    window.onload = function () { // 你加载你的
        var box = document.querySelector(".box");
        console.time("a");
        console.time("b");


        var req = new XMLHttpRequest();
        req.open("get", "http://192.168.52.233/study/php/goodsList.php", true);
        req.send();
        req.onreadystatechange = function () { //我请求我的  
            if (req.readyState == 4 && req.status == 200) {
                var result = req.responseText;
                // console.log(result);
                var dataList = JSON.parse(result);
                console.log(dataList);

                /* 
                    goods_current_price: "380"
                    goods_detail: "【移不动】Capcom CFB 怪物猎人 泡狐龙 手办 散货"
                    goods_id: "a001"
                    goods_old_price: "450"
                    goods_pic: "//gw.alicdn.com/bao/uploaded/i2/72458074/TB2oYdsedXnpuFjSZFoXXXLcpXa_!!72458074.jpg"
                    goods_trade_num: "267"
                    id: "1"
                    type: null
                 */

                var html = "";
                dataList.forEach((item, index) => {
                    // var goods_pic = item.goods_pic;
                    // var goods_detail = item.goods_detail;
                    // var goods_current_price = item.goods_current_price;
                    // var goods_trade_num = item.goods_trade_num;
                    // console.log(item);
                    var { goods_id, goods_pic, goods_detail, goods_current_price, goods_trade_num } = item;
                    // console.log(goods_pic, goods_detail, goods_current_price, goods_trade_num);
                    html += `
                        <li>
                            <img src="http:${goods_pic}"
                                alt="">
                            <div>
                                <p>${goods_detail}</p>
                                <p><span>${goods_current_price}</span> <i>${goods_trade_num}</i> <button class="buy" productId="${goods_id}">购买</button></p>
                            </div>
                        </li>`;

                })
                // 生成之前
                box.innerHTML = html; // 动态生成
                // 生成之后

                var buyList = document.getElementsByClassName("buy");  //生成之后 获取
                console.log(buyList);

                for (let i = 0; i < buyList.length; i++) {
                    let buy = buyList[i];
                    buy.onclick = function () {
                        // alert(i);
                        var productId = this.getAttribute("productId");
                        alert(productId);
                    }
                }


                console.timeEnd("b");
            }
        }

        console.timeEnd("a");


        // 代码加载到此处  html结构还没有动态生成  所以获取为 []
        var buyList = document.getElementsByClassName("buy");
        // console.log(buyList);
    }


</script>

</html>